<template>
	<!-- 头像选择器 -->
	<view>
		<view class="ceiling" :style="{ 'padding-top': statusBarHeight + 'px' }"></view>
		<searchHead goback='gobackF' background="#EE515A" title='头像选择器' searchTip=''></searchHead>
		<!-- active表示但前激活的 -->
		<view class="imgWarp flex flex-wrap">
			<view class="item" :class="checkHeadImg == 1 ? 'active':''" @click="changeHeadImg(1)">
				<image src="/static/images/headImg/1.png" mode="widthFix" ></image>
			</view>
			<view class="item" :class="checkHeadImg == 2 ? 'active':''" @click="changeHeadImg(2)">
				<image src="/static/images/headImg/2.png" mode="widthFix" ></image>
			</view>
			<view class="item" :class="checkHeadImg == 3 ? 'active':''" @click="changeHeadImg(3)">
				<image src="/static/images/headImg/3.png" mode="widthFix" ></image>
			</view>
			<view class="item" :class="checkHeadImg == 4 ? 'active':''" @click="changeHeadImg(4)">
				<image src="/static/images/headImg/4.png" mode="widthFix" ></image>
			</view>
			<view class="item" :class="checkHeadImg == 5 ? 'active':''" @click="changeHeadImg(5)">
				<image src="/static/images/headImg/5.png" mode="widthFix" ></image>
			</view>
			<view class="item" :class="checkHeadImg == 6 ? 'active':''" @click="changeHeadImg(6)">
				<image src="/static/images/headImg/6.png" mode="widthFix" ></image>
			</view>
			<view class="item" :class="checkHeadImg == 7 ? 'active':''" @click="changeHeadImg(7)">
				<image src="/static/images/headImg/7.png" mode="widthFix" ></image>
			</view>
			<view class="item" :class="checkHeadImg == 8 ? 'active':''" @click="changeHeadImg(8)">
				<image src="/static/images/headImg/8.png" mode="widthFix" ></image>
			</view>	
			<view class="item" :class="checkHeadImg == 9 ? 'active':''" @click="changeHeadImg(9)">
				<image src="/static/images/headImg/9.png" mode="widthFix" ></image>
			</view>
		</view>
		<view class="padding-lr flex flex-direction" style="margin-top: 60rpx;" @click="toMember">
			<button class="cu-btn bg-red lg">确定选择</button>
		</view>
	</view>
</template>

<script>
	import searchHead from "@/component/searchHead/searchHead.vue"
	export default {
		components:{
			searchHead,
		},
		data() {
			return {
				statusBarHeight: getApp().globalData.statusBarHeight, //状态栏高度
				checkHeadImg:0
			}
		},
		methods: {
			changeHeadImg: function(index) {
				this.checkHeadImg = index
				let data = {
					headImg:this.checkHeadImg
				}
				this.$Request.post(this.$api.index.changeHeadImg,data).then(res => {
					console.log(res)
				})
			},
			toMember: function(){
				uni.switchTab({
					url:'/pages/member/member'
				})
			}
		}
	}
</script>

<style scoped>
	.imgWarp{
		padding: 8rpx 0;
		justify-content: space-between;
	}
	.item{
		padding: 4rpx 4rpx 0rpx 4rpx;
		width: 33.3%;
	}
	.active{
		position: relative;
	}
	.active::after{
		content: '';
		position: absolute;
		width: 100rpx;
		height: 100rpx;
		background-image: url(/static/images/headImg/a.png);
		bottom: 10rpx;
		right: 10rpx;
		z-index: 10;
	}
	.padding-lr {
		padding: 0 60rpx 0 60rpx;
	}
</style>
